<template>
  <div>
    <NewUser />
    <a-table
      :columns="columns"
      :data-source="data"
      bordered
      :rowKey="(record) => record.userId"
    >
      <template
        v-for="col in ['userName', 'password']"
        :slot="col"
        slot-scope="text, record"
      >
        <div :key="col">
          <a-input
            v-if="record.editable"
            style="margin: -5px 0"
            :value="text"
            @change="(e) => handleChange(e.target.value, record.userId, col)"
          />
          <template v-else>
            {{ text }}
          </template>
        </div>
      </template>
      <template slot="operation" slot-scope="text, record">
        <div class="editable-row-operations">
          <span v-if="record.editable">
            <a @click="() => save(record.userId)">Save</a>
            <a-divider type="vertical" />
            <a @click="() => cancel(record.userId)">Cancel</a>
          </span>
          <span v-else>
            <a :disabled="editingKey !== ''" @click="() => edit(record.userId)"
              >Edit</a
            >
            <a-divider type="vertical" />
            <a-popconfirm
              title="Sure to delete?"
              @confirm="() => onDelete(record.userId)"
            >
              <a href="javascript:;">Delete</a>
            </a-popconfirm>
          </span>
        </div>
      </template>
    </a-table>
  </div>
</template>

<script>
import axios from "axios";
import NewUser from "./NewUser.vue";
const columns = [
  {
    title: "用户名称",
    dataIndex: "userName",
    width: "30%",
    scopedSlots: { customRender: "userName" },
  },
  {
    title: "用户密码",
    dataIndex: "password",
    width: "30%",
    scopedSlots: { customRender: "password" },
  },
  {
    title: "操作",
    dataIndex: "operation",
    scopedSlots: { customRender: "operation" },
  },
];

const data = [];
for (let i = 0; i < 100; i++) {
  data.push({
    userId: i.toString(),
    userName: `Edrward ${i}`,
    password: "32",
  });
}
export default {
  name: "User",
  components: { NewUser },
  data() {
    this.cacheData = data.map((item) => ({ ...item }));
    return {
      data,
      columns,
      editingKey: "",
    };
  },
  mounted() {
    this.fresh();
  },
  methods: {
    fresh() {
      axios.get("http://localhost:8080/api/user/all").then(
        (response) => {
          console.log(response.data.msg);
          this.data = response.data.data;
        },
        (error) => {
          console.log(error.message.msg);
        }
      );
    },
    handleChange(value, userId, column) {
      const newData = [...this.data];
      const target = newData.filter((item) => userId === item.userId)[0];
      if (target) {
        target[column] = value;
        this.data = newData;
      }
    },
    edit(userId) {
      const newData = [...this.data];
      const target = newData.filter((item) => userId === item.userId)[0];
      this.editingKey = userId;
      if (target) {
        target.editable = true;
        this.data = newData;
      }
    },
    save(userId) {
      const newData = [...this.data];
      const newCacheData = [...this.cacheData];
      const target = newData.filter((item) => userId === item.userId)[0];
      const targetCache = newCacheData.filter(
        (item) => userId === item.userId
      )[0];
      if (target && targetCache) {
        delete target.editable;
        this.data = newData;
        Object.assign(targetCache, target);
        this.cacheData = newCacheData;
      }
      this.editingKey = "";
      axios.put("http://localhost:8080/api/user/one", target).then(
        (response) => {
          console.log(response.data.msg);
          this.fresh();
        },
        (error) => {
          console.log(error.message.msg);
        }
      );
    },
    cancel(userId) {
      const newData = [...this.data];
      const target = newData.filter((item) => userId === item.userId)[0];
      this.editingKey = "";
      if (target) {
        Object.assign(
          target,
          this.cacheData.filter((item) => userId === item.userId)[0]
        );
        delete target.editable;
        this.data = newData;
      }
      console.log(this.data);
    },
    onDelete(userId) {
      axios.delete("http://localhost:8080/api/user/one/" + userId).then(
        (response) => {
          console.log(response.data.msg);
          this.fresh();
        },
        (error) => {
          console.log(error.message.msg);
        }
      );
    },
  },
};
</script>
<style scoped>
.editable-add-btn {
  margin-bottom: 8px;
}
</style>
